<!--概览点更多的弹窗-->
<template>
  <div>
    <a-drawer
      :title="$t('Data-trend')"
      placement="right"
      :visible="visible"
      width="820"
      @close="onClose">
    <!-- :maskClosable="false" -->
      <!--容量概览-->
      <div class="legend-value font-class">
        {{$t('Capacity-overview')}}
        <a-popover>
          <template slot="content" v-if="$store.state.language=='zh'">
            <div>全部数据盘硬件容量：可用来存放数据的物理磁盘的容量，不包括系统盘和缓存盘系统占用容量;系统为了保证稳定高效运行，而预留的一部分空间</div>
            <div>全部可用容量：指能供用户自由支配的容量，包括已用容量和剩余可用容量</div>
            <div>剩余可用容量：指能供用户自由支配的剩余容量</div>
            <div>已用容量：指用户存放数据的规模，不包括系统为了维持稳定性所预留的容量</div>
            <div>未激活容量：指插了盘，但未进行纳管配置，系统可识别到盘，但尚未分配给用户使用的容量空间</div>
          </template>
          <template slot="content" v-else>
            <div>Hardware capacity of all data disks: The capacity of the physical disk that can be used to store data, excluding the occupied capacity of the system disk and cache disk. Part of the space reserved by the system to ensure stable and efficient operation</div>
            <div>Total available capacity: Refers to the capacity that can be freely controlled by users, including used capacity and remaining available capacity</div>
            <div>Remaining usable capacity: Refers to the remaining capacity that can be freely controlled by users</div>
            <div>Used capacity: Refers to the size of data stored by users, excluding the capacity reserved by the system to maintain stability</div>
            <div>Inactive capacity: Refers to the capacity space that the disk is inserted but not configured for receiving pipes. The system can recognize the disk but has not been allocated to users</div>
          </template>
          <img class="tip-img" src="../../../../static/images/disk_check/16_f_ic_why.png" alt="why_img"/>
        </a-popover>
      </div>
      <div class="pie-chart-content">
        <div id="pieChart"></div>
        <div class="total-content">
          <div>{{changeSize(totalCapacity_byte)}}</div>
          <div>{{$t('All-data-disks')}}</div>
        </div>
        <div class="capacity-legend">
          <div class="legend-item">
            <span class="legend-value">{{$t('All-data-disks')}}</span><span class="legend-value1">{{changeSize(totalCapacity_byte)}}</span>
          </div>
          <div class="legend-item">
            <span><span class="small-circle purple-circle"></span>{{$t('System-capacity')}}</span><span class="legend-value">{{changeSize(systemCapacity_byte)}}</span>
          </div>
          <div class="legend-item">
            <span><span class="small-circle grey-circle"></span>{{$t('Total-available-capacity')}}</span><span class="legend-value">{{changeSize(canUseCapacity_byte)}}</span>
          </div>
          <div class="legend-child-item">
            <div class="legend-item2">
              <span><span class="small-circle blue-circle"></span>{{$t('Used-capacity2')}}</span><span class="legend-value">{{changeSize(usedCapacity_byte)}}</span>
            </div>
            <div class="legend-item2">
              <span><span class="small-circle green-circle"></span>{{$t('Usable-capacity')}}</span><span class="legend-value">{{changeSize(availCapacity_byte)}}</span>
            </div>
          </div>
          <div class="legend-item">
            <span><span class="small-circle orange-circle"></span>{{$t('Inactive-capacity')}}</span><span class="legend-value">{{changeSize(unManagedCapacity_byte)}}</span>
          </div>
        </div>
      </div>
      
      <!--用户数据规模变动情况-->
      <div class="legend-value font-class" style="margin:15px 0 10px">{{$t('User-data-change')}}</div>
      <div>
        <!-- 设置查询条件 -->
        <span class="font-class">{{$t('Set-query')}}：</span>
        <a-radio-group v-model="timeValue" button-style="solid" @change="changeTime" >
          <a-radio-button value="month">{{$t('Month')}}</a-radio-button>
          <a-radio-button value="year">{{$t('Year')}}</a-radio-button>
        </a-radio-group>
        <a-select v-model="stageValue" style="width: 150px;margin:0 10px" @change="changeStage" >
          <a-select-option value="current">{{$t('Base-on-stage')}}</a-select-option><!--以当前阶段为基准-->
          <a-select-option value="time">{{$t('Base-on-year-month')}}</a-select-option><!--以自然年/月为基准-->
        </a-select>
        <a-select v-model="capacityValue" style="width: 200px" @change="changeCapacity" >
          <a-select-option value="0">{{$t('All-capacity-denominator')}}</a-select-option><!--以全部可用容量为分母-->
          <a-select-option value="1">{{$t('Data-disk-denominator')}}</a-select-option><!--以全部数据盘硬件容量为分母-->
        </a-select>
        <a-select v-model="showValue" style="width: 200px;margin:0 10px" @change="changeShowCondition" >
          <a-select-option value="0">{{$t('Only-percent-capacity')}}</a-select-option><!--显示容量百分比+容量值-->
          <a-select-option value="1">{{$t('Only-capacity')}}</a-select-option><!--只显示容量值-->
          <a-select-option value="2">{{$t('Only-percent')}}</a-select-option><!--只显示容量百分比-->
        </a-select>
      </div>

      <!--折线柱状图-->
      <div id="lineAndBarChart"></div>

      <!--折现柱状图时间控件-->
      <div v-show="stageValue!='current'" style="text-align:center;margin:5px 0 15px;">
        <a-button class="month-btn" @click="yearReduce" :disabled="isDisabledYearReduce" ><<</a-button>
        <a-button v-show="isShowMonth" class="month-btn" @click="monthReduce" :disabled="isDisabledMonthReduce" ><</a-button>
        <span>{{yearValue}}年</span>
        <span v-show="isShowMonth">{{monthValue}}月</span>
        <a-button v-show="isShowMonth" class="month-btn" @click="monthAdd" :disabled="isDisabledMonthAdd" >></a-button>
        <a-button class="month-btn" @click="yearAdd" :disabled="isDisabledYearAdd" >>></a-button>
      </div>

      <!--建议-->
      <!-- <div class="tip">
        <img src="../../../../static/images/disk_check/16_f_ic_tips.png" />
        <span v-if="$store.state.language=='zh'">建议：根据您的使用习惯，您的可用空间预计将在<span>2022年12月11日</span>前全部用完，为保障您的系统稳定性，请及时扩容。</span>
        <span v-else>Suggestion: according to your usage habits, your available space is expected to be used up before December 11, 2022. In order to ensure the stability of your system, please expand it in time.</span>
      </div> -->

      <!--扩容计划-->
      <div>
        <span class="legend-value font-class" style="display:inline-block;margin:10px 0">{{$t('Set-expansion-plan')}}</span>
        <span class="font-class"> ({{$t('Note-expansion')}})</span>
      </div>
      <div>
        {{$t('Expansion-cycle')}}：<!--扩容周期-->
        <a-select v-model="cycleValue" style="width:160px; margin-right:10px" >
          <a-select-option value="0">{{$t('Three-months')}}</a-select-option>
          <a-select-option value="1">{{$t('Half-a-year')}}</a-select-option>
          <a-select-option value="2">{{$t('A-year')}}</a-select-option>
          <!-- <a-select-option value="3">{{$t('Two-years')}}</a-select-option>
          <a-select-option value="4">{{$t('Three-years')}}</a-select-option> -->
        </a-select>
        {{$t('Capacity-usage-forecast')}}：<!--容量使用预测-->
        <a-select v-model="capacityUseValue" style="width:160px; margin-right:10px"  >
          <a-select-option value="0">{{$t('Keep-growth')}}</a-select-option><!--保持当前增长趋势-->
          <a-select-option value="1">{{$t('Significant-add')}}</a-select-option><!--显著增加-->
          <a-select-option value="2">{{$t('Significantly-reduce')}}</a-select-option><!--显著减少-->
        </a-select>
        <a-button type="primary"  @click="showSuggestion">{{$t('View-expansion')}}</a-button>
      </div>
      <a-spin :spinning="suggestLoading">
        <div v-show="isShowSuggest" class="suggestion">
          <div v-if="$store.state.language=='zh'">
            根据您的扩容计划，您在计划时间内还需要<span>{{suggestion}}</span>的<span>可用容量</span>，您大概还需要购买<span>物理容量</span>为<span>{{suggestion}}</span>的硬盘。
          </div>
          <div v-else>
            According to your capacity expansion plan, you need <span>{{suggestion}} usable capacity</span> within the planned time, and you probably need to purchase <span>a hard disk with a physical</span> capacity of <span>{{suggestion}}</span>.
          </div>
        </div>
      </a-spin>
    </a-drawer>
  </div>
</template>

<script>
import { getNowYearMonthDay, getNowTheDays, getNDayOfTimeStamp, getNowDayOrMonth, changeToYearMonthDay } from '../../../untils/formatTime'
import { changeSize, changeSameUnit } from '../../../untils/bytesToSize'

import request from '@/request/request'

export default {
  name: "ClusterDialog",
  props: {
    visible: {
      type: Boolean
    }
  },
  data() {
    return {
      timeValue: 'month',
      stageValue: 'current',
      capacityValue: '0',
      showValue: '0',
      cycleValue: '0',
      capacityUseValue: '0',
      isShowSuggest: false,

      data1: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
      data3: [20, 25.2, 35.3, 45.5, 65.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 65.2],

      data1_1: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
      data3_1: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],

      option: {},
      option_copy: {},

      yearValue: 0,
      monthValue: 0,
      // yearValue_copy: 0,
      // monthValue_copy: 0,
      isDisabledYearAdd: false,
      isDisabledYearReduce: false,
      isDisabledMonthAdd: false,
      isDisabledMonthReduce: false,
      isShowMonth: true,
      endTimeStamp: '',
      startTimeStamp: '',
      step: '',
      timeArr: [],
      capacityArr: [],
      percentArr: [],
      totalCapacity_byte: 0,
      systemCapacity_byte: 0,
      canUseCapacity_byte: 0,
      availCapacity_byte: 0,
      usedCapacity_byte: 0,
      unManagedCapacity_byte: 0,
      systemValue: 0,
      usedValue: 0,
      availValue: 0,
      unManagedValue: 0,
      suggestion: '',
      suggestLoading: false,
      firstEnter: true,
      timeStampArr: [],
    }
  },
  
  mounted() {
    this.yearValue = getNowYearMonthDay().year;
    this.monthValue = getNowYearMonthDay().month;
    this.isDisabledYearAdd = true;
    this.isDisabledMonthAdd = true;
    this.getStartAndEndTimestamp();
  },
  watch: {
    visible(newValue) {
      if(newValue) {
        //获取饼图数据
        this.getPieData();
        //获取柱状折线图数据
        this.getLineBarData();
        // //绘制图表
        // this.$nextTick(() => {
        //   this.drawPieChart();
        // })
      }
    },
    timeValue(newValue) {
      if(newValue == 'month') {
        this.isShowMonth = true;
      }else {
        this.isShowMonth = false;
      }
    },
    yearValue(newValue) {
      if(newValue == getNowYearMonthDay().year || (newValue+1 >= getNowYearMonthDay().year && this.monthValue > getNowYearMonthDay().month)) {//变化的年月等于当前年月
        this.isDisabledYearAdd = true;
      }else {
        this.isDisabledYearAdd = false;
        this.isDisabledMonthAdd = false;
      }
      if((this.monthValue == getNowYearMonthDay().month && newValue == getNowYearMonthDay().year) || this.monthValue == 12) {
        this.isDisabledMonthAdd = true;
      }
      if(newValue+1 > getNowYearMonthDay().year && this.monthValue > getNowYearMonthDay().month) {
        this.isDisabledMonthAdd = true;
        this.isDisabledYearAdd = true;
      }
    },
    monthValue(newValue) {
      if(newValue == 1) {
        this.isDisabledMonthReduce = true;
      }
      // if(newValue == 12) {
      //   this.isDisabledMonthAdd = true;
      // }
      if((newValue == getNowYearMonthDay().month && this.yearValue == getNowYearMonthDay().year) || newValue == 12) {
        this.isDisabledMonthAdd = true;
      }else {
        if(newValue > 1 && newValue < 12) {
          this.isDisabledMonthAdd = false;
          this.isDisabledMonthReduce = false;
        }
      }
      if(this.yearValue+1 >= getNowYearMonthDay().year && newValue > getNowYearMonthDay().month || this.yearValue==getNowYearMonthDay().year) {
        this.isDisabledYearAdd = true;
      }else {
        this.isDisabledYearAdd = false;
      }
    }
  },
  computed: {

  },
  methods: {
    changeSize,
    changeSameUnit,
    //改变条件后，请求数据
    //[startTimeStamp, endTimeStamp)半开半闭区间
    getStartAndEndTimestamp() {//获取开始与结束时间戳
      // let nowTimeStamp = Date.parse(new Date()) / 1000; //当前时间的时间戳
      // this.endTimeStamp = nowTimeStamp;
      let days = getNowTheDays(this.yearValue, this.monthValue);//当前月有几天
      let timestamp = getNDayOfTimeStamp(days-1); //n天的时间戳
      let day = getNowYearMonthDay().day; //当前几号
      this.step = '1d';
      if(this.timeValue == 'month' && this.stageValue == 'current') {//月--当前阶段为基准
        timestamp = 29*60*60*24; //30天的时间戳
        this.yearValue = getNowYearMonthDay().year;
        this.monthValue = getNowYearMonthDay().month;
        this.endTimeStamp = Date.parse(`${this.yearValue}/${this.monthValue}/${day} 08:00:00`) / 1000
        this.startTimeStamp = this.endTimeStamp - timestamp;
      }else if(this.timeValue == 'month' && this.stageValue == 'time') {//月--自然年/月为基准
        this.startTimeStamp = Date.parse(`${this.yearValue}/${this.monthValue}/1 08:00:00`) / 1000;
        this.endTimeStamp = this.startTimeStamp + timestamp;
      }else if(this.timeValue == 'year' && this.stageValue == 'current') {//年--当前阶段为基准
        this.yearValue = getNowYearMonthDay().year;
        this.monthValue = getNowYearMonthDay().month;
        this.endTimeStamp = Date.parse(`${this.yearValue}/${this.monthValue}/${day} 08:00:00`) / 1000;
        // this.startTimeStamp = this.endTimeStamp - getNDayOfTimeStamp(350);
        const year = this.yearValue-(1- ((this.monthValue+1)/12 == 1 ? 0 : Math.floor((this.monthValue+1)/12))); //this.yearValue-(1- Math.floor((this.monthValue+1)/12))
        const month = (this.monthValue+1)%12 == 0 ? 12 :(this.monthValue+1)%12;//(this.monthValue+1)%12
        this.startTimeStamp = Date.parse(`${year}/${month}/${day} 08:00:00`) / 1000;
        this.step = '31d';
      }else if(this.timeValue == 'year' && this.stageValue == 'time') {//年--自然年/月为基准
        this.startTimeStamp = Date.parse(`${this.yearValue}/1/1 08:00:00`) / 1000;
        this.endTimeStamp = Date.parse(`${this.yearValue}/12/31 08:00:00`) / 1000;
        this.step = '31d';
      }
    },

    //获取饼图数据
    getPieData() {
      request('get', 'index/trend/CapacityOverview').then(res => {
        if(res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
        }else {
          // console.log('容量饼图数据', res);
          this.totalCapacity_byte = res.data.total; //全部数据盘硬件容量
          this.systemCapacity_byte = res.data.system; //系统占用总
          this.canUseCapacity_byte = res.data.cluster_total_bytes; //集群可用
          this.availCapacity_byte = res.data.cluster_avail_bytes; //集群剩余
          this.usedCapacity_byte = res.data.cluster_used_bytes; //集群已用
          this.unManagedCapacity_byte = res.data.unmanaged; //未纳管
          this.systemValue = this.changeSameUnit(this.systemCapacity_byte, 3);
          this.usedValue = this.changeSameUnit(this.usedCapacity_byte, 3);
          this.availValue = this.changeSameUnit(this.availCapacity_byte, 3);
          this.unManagedValue = this.changeSameUnit(this.unManagedCapacity_byte, 3);
          this.drawPieChart();
        }
      }).catch(err => {
        console.log(err);
      })
    },

    //获取柱状折线图数据
    getLineBarData() {
      this.timeArr = [];
      this.timeStampArr = [];
      this.capacityArr = [];
      this.percentArr = [];
      request('get', 'index/trend/Statistics',{
        // params: {
          start: this.startTimeStamp,
          end: this.endTimeStamp,
          step: this.step,
          method: this.capacityValue,
        // }
      }).then(res => {
        // console.log('获取柱状折线图数据', res);
        if(res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
        }else {
          res.data.forEach(item => {
            this.timeArr.push(getNowDayOrMonth(item[0], this.timeValue));
            this.timeStampArr.push(item[0]);
            this.capacityArr.push(item[1]);
            this.percentArr.push(item[2]);
          })
          this.drawLineBarChart();
        }
      }).catch(err => {
        console.log(err);
      })
    },

    //改变时间条件
    changeTime(value) {
      this.getStartAndEndTimestamp();
      this.getLineBarData();
      this.showValue = '0';
    },

    //改变阶段条件
    changeStage() {
      this.getStartAndEndTimestamp();
      this.getLineBarData();
      this.showValue = '0';
    },

    //改变容量条件
    changeCapacity() {
      this.getLineBarData();
      this.showValue = '0';
    },

    //年份减法
    yearReduce() {
      this.yearValue--;
      this.getStartAndEndTimestamp();
      this.getLineBarData();
      this.showValue = '0';
    },
    //年份加法
    yearAdd() {
      this.yearValue++;
      this.getStartAndEndTimestamp();
      this.getLineBarData();
      this.showValue = '0';
    },
    //月份减法
    monthReduce() {
      this.monthValue--;
      this.getStartAndEndTimestamp();
      this.getLineBarData();
      this.showValue = '0';
    },
    //月份加法
    monthAdd() {
      this.monthValue++;
      this.getStartAndEndTimestamp();
      this.getLineBarData();
      this.showValue = '0';
    },

    //改变显示条件
    changeShowCondition(value) {
      if(value == '1') { //只显示容量值
        this.option.series = this.option_copy.series.slice(0,1);
        this.option.yAxis[0].splitLine.show = true;
        this.option.yAxis[1].splitLine.show = false;
      }else if(value == '2'){ //只显示容量百分比
        this.option.series = this.option_copy.series.slice(1);
        this.option.yAxis[0].splitLine.show = false;
        this.option.yAxis[1].splitLine.show = true;
      }else {
        this.option.series = this.option_copy.series;
        this.option.yAxis[0].splitLine.show = false;
        this.option.yAxis[1].splitLine.show = false;
      }
      let myChart = this.$echarts.init(document.getElementById('lineAndBarChart'));
      myChart.setOption(this.option, true);//true重绘
    },

    //查看扩容建议
    showSuggestion() {
      this.suggestLoading = true;
      request('get', 'index/trend/Advise',{
        // params: {
          period: this.cycleValue,
          basis: this.capacityUseValue
        // }
      }).then(res => {
        // console.log('扩容建议', res)
        if(res.data.flag == 1) {
          this.model(res.data.id) //返回模板
          this.notice(res.data.id,res.data.params,res.data.flag) //通知列表显示
        }else {
          this.suggestion = res.data.expend;
        }
      }).catch(err => {
        console.log(err)
      }).finally(() => {
        this.suggestLoading = false;
        this.isShowSuggest = true;
      })
    },
    //绘制容量概览图
    drawPieChart() {
      let myChart = this.$echarts.init(document.getElementById('pieChart'));
      let option = {
        color: ['#6634b3','#006db8','#059db3','#df8300'],// 紫色、蓝色、绿色、橙色
        tooltip: {
          trigger: 'item',
          formatter: `{b}：{c}GiB`
        },
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: true,
            itemStyle: {
              // borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: true,
              formatter: '{b}\n{c}GiB({d}%)'
            },
            labelLine: {
              show: true,
              // lineStyle: {
              //   cap: "round"
              // }
            },
            data: [
              { value: this.systemValue, name: this.$t('System-capacity') },//系统占用容量
              { value: this.usedValue, name: this.$t('Used-capacity2') },//已用容量
              { value: this.availValue, name: this.$t('Usable-capacity') },//剩余可用容量
              { value: this.unManagedValue, name: this.$t('Inactive-capacity') },//未激活容量
            ]
          }
        ]
      };
      myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize()});
    },

    //绘制容量折线柱状图
    drawLineBarChart() {
      this.option = {
        color: ['#2fa4e6','#05bcad'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: (params) => {
            // console.log('params', params)
            let currentDate = '';
            if(this.timeValue == 'year') {
              currentDate = changeToYearMonthDay(this.timeStampArr[params[0].dataIndex],'year');
            }else {
              currentDate = changeToYearMonthDay(this.timeStampArr[params[0].dataIndex],'month');
            }
            if(this.$store.state.language == 'zh') {
              if(this.showValue == 0) { //显示容量值+百分比
                return `
                  <div>${currentDate}</div>
                  <div style="display:flex;justify-content:space-between">
                    <div style="display:inline-block;width:140px">
                      <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2fa4e6;"></span>
                      ${params[0].seriesName}
                    </div>
                    <span style="font-weight:700">${params[0].value} TB</span>
                  </div>
                  <div style="display:flex;justify-content:space-between">
                    <div style="display:inline-block;width:140px">
                      <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#05bcad;"></span>
                      ${params[1].seriesName}
                    </div>
                    <span style="font-weight:700">${params[1].value} %</span>
                  </div>
                `
              }else if(this.showValue == 1) {//显示容量值
                return `
                  <div>${currentDate}</div>
                  <div style="display:flex;justify-content:space-between">
                    <div style="display:inline-block;width:140px">
                      <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2fa4e6;"></span>
                      ${params[0].seriesName}
                    </div>
                    <span style="font-weight:700">${params[0].value} TB</span>
                  </div>
                `
              }else if(this.showValue == 2) {//百分比
                return `
                  <div>${currentDate}</div>
                  <div style="display:flex;justify-content:space-between">
                    <div style="display:inline-block;width:140px">
                      <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#05bcad;"></span>
                      ${params[0].seriesName}
                    </div>
                    <span style="font-weight:700">${params[0].value} %</span>
                  </div>
                `
              }
            }else {
              if(this.showValue == 0) {
                return `
                  <div style="width:280px">
                    <div>${currentDate}</div>
                    <div style="display:flex;justify-content:space-between">
                      <div style="display:inline-block;width:140px">
                        <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2fa4e6;"></span>
                        ${params[0].seriesName}
                      </div>
                      <span style="font-weight:700">${params[0].value} TB</span>
                    </div>
                    <div style="display:flex;justify-content:space-between">
                      <div style="display:inline-block;width:140px">
                        <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#05bcad;"></span>
                        ${params[1].seriesName}
                      </div>
                      <span style="font-weight:700">${params[1].value} %</span>
                    </div>
                  </div>
                `
              }else if(this.showValue == 1) {
                return `
                  <div style="width:280px">
                    <div>${currentDate}</div>
                    <div style="display:flex;justify-content:space-between">
                      <div style="display:inline-block;width:140px">
                        <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#2fa4e6;"></span>
                        ${params[0].seriesName}
                      </div>
                      <span style="font-weight:700">${params[0].value} TB</span>
                    </div>
                  </div>
                `
              }else if(this.showValue == 2) {
                return `
                  <div style="width:280px">
                    <div>${currentDate}</div>
                    <div style="display:flex;justify-content:space-between">
                      <div style="display:inline-block;width:140px">
                        <span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#05bcad;"></span>
                        ${params[0].seriesName}
                      </div>
                      <span style="font-weight:700">${params[0].value} %</span>
                    </div>
                  </div>
                `
              }
              
            }
          }
        },
        grid: {
          left: '10%',
          top: '25%',
          bottom: '10%'
        },
        legend: {
          data: [this.$t('Capacity-usage-value'), this.$t('Capacity-usage-percent')],
          top: "0%"
        },
        xAxis: [
          {
            type: 'category',
            data: this.timeArr,
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: this.$t('Capacity-usage-value')+"（TB）",//容量使用值
            min: 0,
            splitLine: {
              show: false
            }
            // max: 250,
            // interval: 50,
            // axisLabel: {
            //   formatter: '{value} GB'
            // }
          },
          {
            type: 'value',
            name: this.$t('Capacity-usage-percent')+"（%）",//容量使用百分比
            splitLine: {
              show: false
            }
            // min: 0,
            // max: 100,
            // interval: 5,
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          }
        ],
        series: [
          {
            name: this.$t('Capacity-usage-value'),//容量使用值
            type: 'bar',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' TB';
              }
            },
            data: this.capacityArr
          },
          {
            name: this.$t('Capacity-usage-percent'),//容量使用百分比
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter: function (value) {
                return value + ' %';
              }
            },
            data: this.percentArr
          }
        ]
      }
      this.option_copy = JSON.parse(JSON.stringify(this.option))
      this.getLineBarChart(this.option);
    },
    getLineBarChart(options) {
      let myChart = this.$echarts.init(document.getElementById('lineAndBarChart'));
      let option = options
      myChart.setOption(option);
      window.addEventListener("resize", () => { myChart.resize()});
      myChart.on('legendselectchanged', (params) => {
        // console.log('aaaaaaaaa', Object.entries(params.selected));
        //如果两个都显示
        if(Object.entries(params.selected)[0][1] && Object.entries(params.selected)[1][1]) {
          this.showValue = '0';
        }
        //只显示容量值
        else if(Object.entries(params.selected)[0][1] && !Object.entries(params.selected)[1][1]) {
          this.showValue = '1';
        }
        //只显示百分比
        else if(Object.entries(!params.selected)[0][1] && Object.entries(params.selected)[1][1]) {
          this.showValue = '2';
        }else {
          this.showValue = '';
        }
        // //如果两个都显示
        // if((params.selected['容量值使用值'] && params.selected['容量使用百分比']) || (params.selected['Capacity usage percentage'] && params.selected['Capacity usage value'])) {
          
        // }
        // //只显示容量值
        // else if((params.selected['容量值使用值']==true && params.selected['容量使用百分比']==false) || (params.selected['Capacity usage percentage']==true && params.selected['Capacity usage value']==false)) {
        //   this.showValue = '1';
        // }
        // //只显示百分比
        // else if((params.selected['容量值使用值']==false && params.selected['容量使用百分比']==true) || (params.selected['Capacity usage percentage']==false && params.selected['Capacity usage value']==true)) {
        //   this.showValue = '2';
        // }else {
        //   this.showValue = '';
        // }
      });
    },

    //关闭抽屉
    onClose() {
      this.$emit('closeDrawer')
    },

  }
}
</script>

<style scoped>
  .pie-chart-content {
    position: relative;
    width: 100%;
    height: 100%;
  }
  #pieChart {
    width: 447px;
    height: 180px;
  }
  .total-content {
    position: absolute;
    top: 50%;
    left: 23.4%;
    transform: translateY(-50%);
  }
  .total-content div:nth-of-type(1) {
    color: var(--themeColor);
    font-size: 14px;
    font-weight: 700;
    text-align: center;
  }
  .total-content div:nth-of-type(2) {
    width: 80px;
    text-align: center;
    color: #333;
    /*英文*/
    /* word-break:break-all; */
    /*中文*/
	  /* white-space:pre-wrap; */
    font-size: 12px;
  }
  .capacity-legend {  
    position: absolute;
    top: -10px;
    right: 8%;
  }
  .legend-item,
  .legend-item2 {
    display: flex;
    justify-content: space-between;
    width: 229px;
    margin: 10px 0;
    font-size: 14px;
  }
  .legend-item2 {
    width: 224px;
    padding: 2px 5px;
  }
  .legend-child-item {
    margin-left: 10px;
    background-color: #eff0f3;
  }
  .small-circle {
    display: inline-block;
    width: 8px;
	  height: 8px;
    border-radius: 50%;
    margin-right: 5px;
  }
  .legend-value1 {
    font-weight: 700;
    font-size: 14px;
    color: var(--themeColor);
  }
  .legend-value {
    font-weight: 700;
  }
  .font-class {
    font-size: 14px;
    color: #333;
  }
  #lineAndBarChart {
    width: 100%;
    height: 220px;
  }
  .tip {
    font-size: 12px;
    padding: 8px;
    background-color: #e6f3ff;
    border-radius: 4px;
    border: solid 1px var(--themeColor);
    margin: 10px 0;
  }
  .tip img {
    margin-right: 8px;
    vertical-align: text-bottom;
  }
  .suggestion {
    width: 100%;
    height: auto;
    padding: 5px;
    font-size: 14px;
    margin: 10px 0;
    background-color: #eff0f3;
  }
  .suggestion div:nth-child(1) span {
    color: var(--themeColor);
    font-weight: 700;
  }
  .tip-img {
    vertical-align: text-top;
  }
  .month-btn {
    margin: 0 8px;
  }

  ::v-deep.ant-drawer-header,
  ::v-deep.ant-drawer-body {
    padding: 15px;
  }
  /* ::v-deep.ant-select-selection__rendered {
    font-size: 12px;
  } */
  ::v-deep.ant-radio-group {
    vertical-align: bottom;
  }
  @media screen and (min-width: 1920px) {
    #pieChart {
      height: 231px;
    }
    #lineAndBarChart {
      height: 300px;
    }
    .total-content {
      left: 23.4%;
    }
    .total-content div:nth-of-type(1) {
      font-size: 18px;
    }
    .total-content div:nth-of-type(2),
    .font-class,
    .tip,
    .suggestion,
    ::v-deep.ant-select-selection__rendered {
      font-size: 14px;
    }
    .legend-value1 {
      font-size: 18px;
    }
  }
</style>